<template>
    <div class="padding-lr-xs">
        <a-form :label-col="{ span: 5 }" :wrapper-col="{ span: 19 }" >
            <a-form-item>
                <span slot="label">
                    定时方式
                    <a-tooltip placement="bottom" overlayClassName="custom-tip">
                        <template slot="title">
                            <div style="display: flex;">
                            <div>
                                <h3>指定日期</h3>
                                <p>&emsp;在指定时间点执行</p>
                                <p>&emsp;格式:2023-08-11T12:13:14</p>
                                <p>&emsp;在2023-08-11T12:13:14执行该流程ISO 8601时间格式,如果要加时间需要前面加T</p>
                                <h3>等待日期</h3>
                                <p>&emsp;指定定时器之前要等待多长时间</p>
                                <p>&emsp;使用ISO 8601规定的格式 (由BPMN 2.0规定)<br>
                                    &emsp;S表示秒,M表示分,D表示天;P表示时间段,T表示精确到时间的时间段<br>
                                    &emsp;P1D:代表1天后执行此时间定时器<br>
                                    &emsp;P1H:代表1小时后执行此时间定时器<br>
                                    &emsp;P1M:代表1月后执行此时间定时器<br>
                                    &emsp;PT1M:代表1分钟后执行此时间定时器
                                </p>
                                <h3>重复周期</h3>
                                <p>&emsp;指定重复执行的间隔</p>
                                <p>&emsp;示例:R2/PT1M</p>
                                <p>&emsp;R表示需要执行的次数,R2/PT1M表示执行两次,每次持续1分钟</p>
                                <p>&emsp;支持cron表达式:秒 分钟 小时 月份中的日期 月份 星期中的日期 年份</p>
                            </div>
                            </div>
                        </template>
                        <a-icon type="question-circle-o" />
                    </a-tooltip>
                </span>
                <a-select placeholder="请选择定时方式" v-model="timingMethod" @change="changeMode">
                <a-select-option value="appointDay">指定日期</a-select-option>
                <a-select-option value="durationDay">等待日期</a-select-option>
                <a-select-option value="RepetitionCycle">重复周期</a-select-option>
                </a-select>
            </a-form-item>
            <template v-if="timingMethod === 'appointDay'">
                <a-form-item label="时间">
                    <a-date-picker
                        placeholder="请选择指定的日期"
                        allowClear
                        showTime
                        style="width: 338.83px;"
                        v-model="timingDate"
                        @change="changeDate"
                    />
                </a-form-item>
            </template>
            <template v-else-if="timingMethod === 'durationDay' || timingMethod === 'RepetitionCycle'">
                <a-form-item label="时间">
                    <a-input placeholder="请输入时间" v-model="timingDate" @change="changeINputDate"/>
                </a-form-item>
            </template>
            <a-form-item label="超时提醒" name="ifRemind">
                <a-checkbox v-model="ifRemind.checked" @change="handleRemind"/>
                <a-select v-if="ifRemind.checked" mode="multiple" v-model="ifRemind.notificationMethods" placeholder="请选择通知的方式" @change="selectMethods">
                    <a-select-option value="timerfired.message">短信</a-select-option>
                    <a-select-option value="timerfired.mail">邮件</a-select-option>
                    <a-select-option value="timerfired.note">站内信</a-select-option>
                    <a-select-option value="timerfired.wechat">企业微信</a-select-option>
                </a-select>
            </a-form-item>
            <a-form-item label="超时自动审批">
                <a-checkbox v-model="autoApproval" @change="ifApproval"/>
            </a-form-item>
        </a-form>
        <a-alert message="注意定时任务必须使用【中间/边界事件】 -> 【定时边界事件(非中断)】组件挂载到用户任务节点上" banner style="margin-bottom: 5px;">
        </a-alert>
        <a-alert message="注意子流程中不能嵌入定时开始事件" banner style="margin-bottom: 5px;">
        </a-alert>
        <a-alert message="注意定时开始事件会自动触发流程启动,无需调用API启动流程,如果调用会启动两个流程实例" banner style="margin-bottom: 5px;">
        </a-alert>
        <a-alert message="注意如果定时开始事件的流程重新部署，新的流程定义会冲刷掉老的流程定义，定时作业也会刷新，再起自动启动流程会启动新的流程定义" banner style="margin-bottom: 5px;">
        </a-alert>
        <a-alert message="注意如果想使用定时启动事件需要开启作业任务 配置如下:configuration.setAsyncExecutorActivate(true)" banner>
        </a-alert>
    </div>
</template>

<script>
    export default {
        name:'TimingSetting',
        props: {
			formData: {
				type: Object,
				require: true,
			},
			modeler: {
                type: Object,
                required: true,
			},
            nodeElement: {
                type: Object,
				required: true,
            }
		},
        watch: {
		    nodeElement: {
                deep: true,
                immediate: true,
                handler(newVal, oldVal) {
                    const { timingMode, timingDate, ifRemindChecked, ifRemindNotification, autoApproval } = newVal.businessObject.$attrs;
                    this.timingMethod = timingMode;
                    this.timingDate = timingDate;
                    this.ifRemind.checked = !!ifRemindChecked;
                    if (ifRemindNotification) {
                        this.ifRemind.notificationMethods = ifRemindNotification.includes(",") ? ifRemindNotification.split(",") : [ifRemindNotification];
                    }
                    this.autoApproval = !!autoApproval;
                }   
            }
        },
        data() {
            return {
                timingMethod: 'appointDay',
                timingDate: '',
                ifRemind: {
                    checked: false,
                    notificationMethods: []
                },
                autoApproval: false,
            }
        },
        methods: {
            changeMode(val) {
                this.handlerChange('mode', val);
            },
            changeDate(data,dateString) {
                this.handlerChange('time', dateString);
            },
            changeINputDate(e) {
                this.handlerChange('time', e.target.value);
            },
            handleRemind(val) {
                this.updateProperties({ 'ifRemindChecked': this.ifRemind.checked  });
                if (!this.ifRemind.checked) {
                    this.ifRemind.notificationMethods = [];
                    this.updateProperties({ 'ifRemindNotification': this.ifRemind.notificationMethods  });
                }
            },
            selectMethods(val) {
                this.updateProperties({ 'ifRemindNotification': this.ifRemind.notificationMethods  });
            },
            ifApproval(e) {
                this.updateProperties({ 'autoApproval': this.autoApproval });
            },
            // 生成对应的定时方式
            handlerChange(type,data) {
                let eventDefinitions = this.nodeElement.businessObject.get('eventDefinitions');
                const timeCycle = this.modeler.get('moddle').create("bpmn:FormalExpression", { body:data });
                const timeDate = this.modeler.get('moddle').create("bpmn:FormalExpression", { body:data });
                const timeDuration = this.modeler.get('moddle').create("bpmn:FormalExpression", { body:data });
                if (type === 'mode') {
                    this.updateProperties({ 'timingMode': data });
                    this.timingDate = ''
                } else {
                    this.updateProperties({ 'timingDate': data , 'timingMode': this.timingMethod });
                    if (this.timingMethod === 'appointDay') {
                        this.modeler.get("modeling").updateModdleProperties(this.nodeElement,eventDefinitions[0],{timeDate});
                        this.modeler.get("modeling").updateModdleProperties(this.nodeElement,eventDefinitions[0],{timeDuration:null});
                        this.modeler.get("modeling").updateModdleProperties(this.nodeElement,eventDefinitions[0],{timeCycle:null});
                    } else if (this.timingMethod === 'durationDay') {
                        this.modeler.get("modeling").updateModdleProperties(this.nodeElement,eventDefinitions[0],{timeDate:null});
                        this.modeler.get("modeling").updateModdleProperties(this.nodeElement,eventDefinitions[0],{timeDuration})
                        this.modeler.get("modeling").updateModdleProperties(this.nodeElement,eventDefinitions[0],{timeCycle:null});
                    } else if(this.timingMethod === 'RepetitionCycle') {
                        this.modeler.get("modeling").updateModdleProperties(this.nodeElement,eventDefinitions[0],{timeDate:null});
                        this.modeler.get("modeling").updateModdleProperties(this.nodeElement,eventDefinitions[0],{timeDuration:null});
                        this.modeler.get("modeling").updateModdleProperties(this.nodeElement,eventDefinitions[0],{timeCycle});
                    }
                }
            },
            updateProperties(properties) {
				this.modeler.get("modeling").updateProperties(this.nodeElement, properties);
			},
        },
    }
</script>

<style lang="less" >
.custom-tip {
    max-width: 450px !important;
    h3 {
        font-weight: 700;
    }
    h3,p {
        margin: 0;
    }
}
</style>